<template>
  <div>
    <!-- 商品头部 -->
    <van-nav-bar left-arrow left-text="返回" title="黑马优购" fixed @click-left="goBack" />
    <div class="appand">
      <!-- 测导航栏区域 -->
      <van-row>
        <van-col span="6">
          <van-sidebar v-model="activeIndex">
            <van-sidebar-item
              :key="index"
              v-for="(item,index) in activeKey"
              @change="onChange(index)"
              :title="item.cat_name"
              @click="gets(item.children)"
            />
          </van-sidebar>
        </van-col>
        <van-col span="18">
          <!-- 渲染标题 -->
          <van-row v-for="item in rightValue" :key="item.cat_id">
            <h4>{{item.cat_name}}</h4>
            <!-- 渲染图片 -->
            <van-row>
              <van-grid :column-num="3">
                <van-grid-item
                  v-for="i in item.children"
                  :key="i.cat_id"
                  :icon="i.cat_icon"
                  :text="i.cat_name"
                  @click="handel(i.cat_id,i.cat_name)"
                />
              </van-grid>
            </van-row>
          </van-row>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { get } from "http";
export default {
  data() {
    return {
      // 分类数据
      activeKey: [],
      activeIndex: 0,
      rightValue: []
    };
  },
  created() {
    this.classList();
    this.$store.commit("setIfShow", true);
  },
  methods: {
    //   获取分类数据
    async classList() {
      const { data: res } = await this.$http.get("/categories");
      if (res.meta.status !== 200) {
        return this.$message.error("获取分类数据失败");
      }
      this.activeKey = res.message;
      this.rightValue = res.message[0].children;
    },
    onChange(index) {
      this.activeIndex = index;
    },
    // 右边的数据
    gets(val) {
      this.rightValue = val;
      document.getElementsByClassName("van-col--18")[0].scrollTop = 0;
    },
    handel(id, cateName) {
      this.$router.push({ path: "/goods", query: { id, cateName } });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style lang="less" scoped>
h4 {
  margin-left: 50px;
}
.van-col {
  margin-top: 46px;
}
.van-col--6 {
  height: 571px;
  overflow-y: auto;
}
.van-col--18 {
  height: 571px;
  overflow-y: auto;
}
.appand {
  margin-bottom: 50px;
}
</style>